<script setup lang="ts" name="CreateUUID">
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
import { createUUIDMyself } from '@/utils/ruoyi.js'
const emits = defineEmits(['back'])
/*========================================>( 模型属性 )<========================================*/
//是否显示此模块
const show = ref<boolean>(false)
//本组件表单
const uuidForm = ref<{ [key: string]: any }>({
    length: 16,
    contain: [1, 2],
    count: 1
})

/*========================================>( 作用域属性 )<========================================*/
//表单校验规则
const _rules: { [key: string]: any } = {
    contain: [
        {
            required: true, validator: (rule: any, value: any, callback: any) => {
                if (value.indexOf(1) == -1 && value.indexOf(2) == -1) {
                    callback(new Error('字母和数字至少需要选择一项'));
                    return
                }
                callback()
            }, trigger: ['blur', 'change']
        }
    ]
}

/*========================================>( dom属性 )<========================================*/
const domUuidForm = ref()

/*========================================>( 普通方法 )<========================================*/
//关闭modal
const cancel = () => {
    emits('back', {})
}

//重置表单
const resetForm = () => {
    domUuidForm.value?.resetFields()
}

//监听各种操作
const handleSubmit = () => {
    domUuidForm.value.validate((vaild: boolean) => {
        if (vaild) {
            let result = ''
            const count = uuidForm.value.count
            for (let i = 0; i < count; i++) {
                result += (i == 0 ? '' : '\n') + createUUIDMyself(uuidForm.value.length, uuidForm.value.contain)
            }
            proxy?.$modal.notifySuccess('插入成功')
            emits('back', { result })
        }
    })
}

/*========================================>( 钩子 )<========================================*/
show.value = true
</script>
<template>
    <el-dialog title="定制UUID" v-model="show" width="50%" @close="cancel" destroy-on-close draggable overflow>
        <el-form ref="domUuidForm" :model="uuidForm" :rules="_rules" label-width="80px">
            <el-form-item label="生成长度" required>
                <el-slider v-model="uuidForm.length" :min="6" :max="48"></el-slider>
            </el-form-item>
            <el-form-item label="参与成分" prop="contain" required>
                <el-checkbox-group v-model="uuidForm.contain">
                    <el-checkbox :label="1">数字</el-checkbox>
                    <el-checkbox :label="2">字母</el-checkbox>
                    <el-checkbox :label="3">下划线 _</el-checkbox>
                    <el-checkbox :label="4">句点 .</el-checkbox>
                </el-checkbox-group>
            </el-form-item>
            <el-form-item label="生成数量" required>
                <el-slider v-model="uuidForm.count" :min="1" :max="20"></el-slider>
            </el-form-item>
        </el-form>
        <div class="dialog-footer">
            <el-button icon="Refresh" @click="resetForm">重置</el-button>
            <el-button icon="Check" type="primary" @click="handleSubmit()">确
                定</el-button>
        </div>
    </el-dialog>
</template>
<style lang="scss"></style>
<style lang="scss" scoped></style>